// 矩形类  可移动
//  属性 宽 高 横坐标 纵坐标 横向速度 纵向速度 对应的dom对象
// speed,单位（像素/秒）
//xspeed,正数向右，负数向左
//yspeed,正数向下，负数向上

class Rectangle {
    constructor(width, height, left, top, xspeed, yspeed, dom) {
        this.width = width;
        this.height = height;
        this.left = left;
        this.top = top;
        this.xspeed = xspeed;
        this.yspeed = yspeed;
        this.dom = dom;
        this.render()
    }

    render() {
        this.dom.style.width = this.width + 'px'
        this.dom.style.height = this.height + 'px'
        this.dom.style.left = this.left + 'px'
        this.dom.style.top = this.top + 'px'
    }

    //duration 移动时间  ,按照矩形速度，经过的时间，移动矩形
    move(duration) {
        //距离
        const xDis = this.xspeed * duration   //横向移动距离
        const yDis = this.yspeed * duration   //纵向移动距离
        this.left = xDis + this.left
        this.top = yDis + this.top

        //判断子类是否有onMove这个方法，如果有，调用，否则继续移动
        //在子类中，通过单独设置onMove方法，实现个别子类需要 划定移动范围
        if (this.onMove) {
            //每次移动后均会调用
            this.onMove()
        }

        this.render()
    }
}